<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
        <basic-container>
            <el-steps :space="250" :active="status">
                <el-step title="待审核"></el-step>
                <el-step title="采购中"></el-step>
                <el-step title="揽货中"></el-step>
                <el-step title="收货入库"></el-step>
            </el-steps>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 1"><h3>当前订单状态：待处理</h3></div>
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 2"><h3>当前订单状态：待审核</h3></div>
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 3"><h3>当前订单状态：采购中</h3></div>
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 4"><h3>当前订单状态：备货中</h3></div>
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 5"><h3>当前订单状态：已揽货</h3></div>
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 6"><h3>当前订单状态：采购完成</h3></div>
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 7"><h3>当前订单状态：部分完成</h3></div>
                    <div class="grid-content bg-purple-dark" v-if="detail.purchaseStatus == 8"><h3>当前订单状态：已关闭</h3></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-dark">
                      <h3>审核人：{{detail.initiatorId}}</h3>
                    </div>
                </el-col>
            </el-row>
        </basic-container>
        <basic-container>
          <el-form ref="form" class="purchasePlanFrom" :inline="true" label-width="120px">
            <el-form-item label="采购类型">
              <el-radio-group v-model="methodType">
                <el-radio :label="2">平台直采</el-radio>
                <el-radio :label="3">协议采购</el-radio>
                <el-radio :label="1">竞价采购</el-radio>
              </el-radio-group>
            </el-form-item>
            <br/>
            <el-form-item label="付款方式">
                <el-radio-group v-model="payType">
                    <el-radio
                            v-for="item in payTypeOpt"
                            :key="item.value"
                            :label="item.value">{{item.label}}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
              <br/>
            <el-form-item label="采购截止时间">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="buyFinalTime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </el-form>
        </basic-container>
        <basic-container>
            <h2 class="io-goods-detail">
                商品信息
                <el-button type="primary" @click="allocation('','all')" style="float: right;">批量设置采购经理</el-button>
            </h2>
            <template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="id" label="序号" type="index" width="100px"></el-table-column>
                    <el-table-column label="商品图片" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.goodsImg" height="50px"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
                    <el-table-column prop="unit" sortable label="单位" align="center"></el-table-column>
                    <el-table-column label="市场价" prop="marketPrice" align="center"></el-table-column>
                    <el-table-column label="采购截止时间" align="center" width="220px">
                      <template slot-scope="scope">
                        <el-date-picker type="datetime" style="width:190px" value-format="yyyy-MM-dd HH:mm:ss" v-model="scope.row.buyFinalTime" placeholder="选择日期时间"></el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="采购单价" prop="buyPrice" align="center" style="min-width: 90px;">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.buyPrice" type="number" style="min-width: 90px;" oninput="if(value.length>8)value=value.slice(0,8)" @change="countMoney()"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="采购数量" prop="needBuyNum" align="center" style="min-width: 90px;">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.needBuyNum" v-enter-number type="number" style="min-width: 90px;" oninput="if(value.length>8)value=value.slice(0,8)" @change="countMoney()"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="采购金额" prop="money" align="center" v-if="buyPrice != ''">
                        <template slot-scope="scope">
                            {{(scope.row.buyPrice * scope.row.needBuyNum).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column label="采购金额" prop="money" align="center" v-else>
                      <template slot-scope="scope">
                        {{(scope.row.marketPrice * scope.row.needBuyNum).toFixed(2)}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="transactorName" sortable label="采购经理" align="center"></el-table-column>
                    <el-table-column label="是否采购" prop="money" align="center">
                      <template slot-scope="scope">
                        <div v-if="scope.row.purchaseStatus == 3">是</div>
                        <div v-if="scope.row.purchaseStatus == 8">否</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="任务内容说明" align="center">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.remarks" @change="countMoney()"/>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-if="scope.row.purchaseStatus == 3" @click="allocation(scope.row,scope.$index)">分配
                            </el-button>
                            <!--<el-button @click="handleClick(scope.row)" type="text" size="small">看趋势</el-button>-->
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small" v-if="scope.row.purchaseStatus == 3">关闭</el-button>
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small" v-if="scope.row.purchaseStatus == 8">开启</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div>
                    <h3 class="settle-accounts">合计采购金额:￥{{calcMoney.toFixed(2)}}</h3>
                </div>
            </template>

            <el-dialog title="分配采购经理" :visible.sync="dialogTableVisible">
                <el-table ref="multipleTable" :data="gridData" border tooltip-effect="dark" style="width: 100%"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="员工编号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="toggleSelection(scope.row)">选定</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </basic-container>
        <basic-container>
          <el-form class="remarkForm" label-width="90px" :model="purchaseOrder">
            <el-form-item label="审批备注：">
              <el-input type="textarea" v-model="actionDesc" :rows="5" placeholder="请输入内容"></el-input>
            </el-form-item>
            <div class="return-btn">
              <el-button type="primary" @click="audit(detail.purchaseStatus)">通过</el-button>
              <el-button type="primary" @click="audit(8)">关闭订单</el-button>
            </div>
          </el-form>
        </basic-container>
    </div>
</template>
<!-- 采购退货 -->
<script>
    import {
        fetchList,
        queryList,
        queryEmployeeList,
        checkTaskBatch,
        getDetail
    } from '@/api/scm/purchase/purchase_order'
    import {
        tableOption
    } from '@/const/crud/scm/purchase/purchase_order'
    import {
        mapGetters
    } from 'vuex'
    import Util from '@/util/pds/utils'

    let cookieUtil = new Util();

    export default {
        name: 'addpurchaseback',
        data() {
            return {
                gridData: [],
                selectIndex: '',
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                tableData: [],
                otherMoney: 100,
                calcMoney: 0,
                employeeName: '',
                detail:'',
                actionDesc:'',
                status:1,
                buyFinalTime:'',
                methodType:2,
                payType: '2',
                pmId: '',
                payTypeOpt: this.$dic.pdsPayType,
            }
        },
        computed: {
          ...mapGetters(['tagWel', 'tagList', 'tag', 'website','permissions']),
          tagLen() {
            return this.tagList.length || 0
          }
        },
        created() {
            this.pmId = this.getStore({name: "pmId"});
            this.buyFinalTime = this.$route.query.buyFinalTime;
            this.init();
        },
        methods: {
            init() {
                let params = {
                    purchaseSn: this.$route.query.purchaseSn,
                    pmId: this.pmId
                }
                getDetail(params).then(response => {
                    this.detail = response.data.data;
                    this.tableData = response.data.data.detailList;
                    this.tableData.forEach(item =>{
                      if(item.purchaseStatus != 8){
                        item.purchaseStatus = 3;
                      }
                    })
                    this.getStatus(this.detail.purchaseStatus);
                    for(var i in this.tableData){
                      if(this.tableData[i].buyPrice){
                        this.calcMoney += parseFloat(this.tableData[i].needBuyNum*this.tableData[i].buyPrice);
                      }else{
                        this.calcMoney += parseFloat(this.tableData[i].needBuyNum*this.tableData[i].marketPrice);
                      }
                    }
                })
                //查询采购经理
                queryEmployeeList({
                    pmId: this.pmId,
                    purchaseEmployeeType: "2"
                }).then(res => {
                    this.gridData = res.data.data
                })
            },
            //改变input是计算总价钱
            countMoney(){
              this.calcMoney = 0;
              for(var i in this.tableData){
                if(this.tableData[i].buyPrice){
                  this.calcMoney += parseFloat(this.tableData[i].needBuyNum*this.tableData[i].buyPrice);
                }else{
                  this.calcMoney += parseFloat(this.tableData[i].needBuyNum*this.tableData[i].marketPrice);
                }
              }
            },
            //判断状态
            getStatus(status){
              if(status == 1 || status == 2){
                this.status = 1;
              }
              if(status == 3){
                this.status = 2;
              }
              if(status == 4 || status == 5){
                this.status = 3;
              }
              if(status == 6){
                this.status = 4;
              }
            },
            //分配
            allocation(row, index) {
                this.dialogTableVisible = true;
                this.selectIndex = index;
            },

            //设置采购经理
            toggleSelection(row) {
                console.log(this.selectIndex);
                if(this.selectIndex == 'all'){
                  for(var i in this.tableData){
                    this.tableData[i].transactorName = row.name;
                    this.tableData[i].transactorId = row.id;
                  }
                  this.dialogTableVisible = false;
                  return false;
                }
                this.tableData[this.selectIndex].transactorName = row.name;
                this.tableData[this.selectIndex].transactorId = row.id;
                this.dialogTableVisible = false;
            },
            //删除
            deleteRow(index, rows) {
              console.log(rows[index].purchaseStatus );
              if(rows[index].purchaseStatus == 8){
                this.tableData[index].purchaseStatus = 3;
                return false
              }
              if(rows[index].purchaseStatus == 3){
                this.tableData[index].purchaseStatus = 8;
              }
            },
            //审核采购单
            audit(purchaseStatus) {
                let param = {};
                param.pmId = this.pmId;
                let list = [];
                this.tableData.forEach(detail => {
                    list.push({
                      purchaseDetailSn:detail.purchaseDetailSn,
                      transactorId:detail.transactorId,
                      transactorName:detail.transactorName,
                      needBuyNum:detail.needBuyNum,
                      buyFinalTime:detail.buyFinalTime,
                      purchaseStatus:detail.purchaseStatus,
                      content:detail.remarks,
                      buyPrice:detail.buyPrice
                    })
                });
                if(purchaseStatus != 8){
                  for(var i in list){
                    if(list[i].transactorId == null){
                      this.$message.error("请设置采购经理");
                      return false;
                    }
                  }
                }
                param.purchaseSn = this.detail.purchaseSn;
                param.detailList = list;
                param.actionDesc = this.actionDesc;
                param.payType = this.payType;
                param.methodType = this.methodType;
                param.buyFinalTime = this.buyFinalTime;
                if(purchaseStatus == 4 || purchaseStatus == 5){
                  purchaseStatus = 6
                }
                if(purchaseStatus == 3){
                  purchaseStatus = 4
                }
                if(purchaseStatus == 2 || purchaseStatus == 1){
                  purchaseStatus = 3
                }
                param.purchaseStatus = purchaseStatus;
                checkTaskBatch(param).then(res => {
                    if (res.data.code === 0) {
                        this.$message.success("审核成功")
                        let _this = this;
                        setTimeout(function () {
                          _this.close();
                        },2000)
                    } else {
                        this.$message.error("审核失败")
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            close(){
              var str_before = location.href.split('#')[1];
              let { tag, key } = this.findTag(str_before);
              this.$store.commit('DEL_TAG', tag);
              this.$router.go(-1);
            },
            findTag(value) {
              let tag, key
              this.tagList.map((item, index) => {
                if (item.value === value) {
                  tag = item
                  key = index
                }
              })
              return { tag: tag, key: key }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .io-goods-detail {
        padding-bottom: 10px;
    }

    .settle-accounts {
        padding-top:10px;
        text-align: right;
    }

    .basic-information {
        margin-top: 20px;
        font-weight: inherit;
    }

    .return-btn {
        height: 100px;
        width: 100%;
        text-align: center;
        line-height: 100px;
    }
    .grid-content{
      padding-top: 10px;
    }
</style>
